<template>
  <div class="pc-bg" :style="{ backgroundImage: `url(${bg})` }">
    <div class="pc-logo" :style="{ backgroundImage: `url(${logo})` }"></div>
    <div class="pc-center">
      <div class="pc-title" v-if="title">{{ title }}</div>
      <div class="pc-form">
        <van-field class="loginInput" v-model="phone" size="large" input-align="center" type="text" placeholder="请输入您的手机号码"/>
        <van-field class="loginInput" v-model="pwd" size="large" input-align="center" type="text" placeholder="请输入您的身份证号后六位"/>
        <div class="loginBtnWrap">
          <XButton :src="require('../../assets/images/start.png')" @click="submit"></XButton>
        </div>
      </div>
    </div>
    <div class="slogan" v-if="slogan">{{ slogan }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { toast } from '@/components/Toast/index'
import { login, configSystem } from '@/api'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const phone = ref('')
const pwd = ref('')
const bg = ref('')
const logo = ref('')
const title = ref('')
const slogan = ref('')

const merid = route.query.merid

if (typeof merid === 'string') {
  window.localStorage.merchantId = merid
}

const initSystem = async () => {
  const res: any = await configSystem()
  console.log(res.code)
  if (res.code === 200) {
    const systemInfo = res.data
    window.localStorage.systemInfo = JSON.stringify(systemInfo)
    title.value = document.title = systemInfo.title
    bg.value = systemInfo.bg_img
    logo.value = systemInfo.logo
    slogan.value = systemInfo.slogan
  }
}
initSystem()

const submit = async () => {
  if (!phone.value) {
    toast('请输入手机号')
    return false
  }
  if (!pwd.value) {
    toast('请输入身份证号后六位')
    return false
  }
  try {
    const res: any = await login({
      mobile: phone.value,
      password: pwd.value,
      group: 'pc'
    })
    if (res.code === 200) {
      window.localStorage.accessToken = res.data.access_token
      window.localStorage.merchantId = res.data.member.merchant_id
      router.replace({
        // path: '/exam-index'
        path: '/pc-classic'
      })
    } else {
      toast(res.message)
    }
  } catch (err) {
    toast((err as Error).message)
  }
}
</script>
<style lang="less" scoped>
  .pc-bg {
    width: 1920px;
    height: 1080px;
    background-color: #c8c7c7;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
  }
  .pc-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 150px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 99;
  }
  .pc-center {
    width: 800px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .pc-title {
    color: #fff;
    font-size: 60px;
    text-align: center;
    padding-bottom: 60px;
  }
  .pc-form {
    background-color: rgba(255,255,255,.5);
    padding: 70px 150px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .loginInput {
    text-align: center;
    line-height: 70px;
    margin-bottom: 70px;
    font-size: 36px;
    width: 500px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.3);
  }
  .loginBtnWrap {
    text-align: center;
  }
  .slogan {
    position: absolute;
    bottom: 20px;
    right: 40px;
    color: #fff;
    font-size: 40px;
  }

</style>
